<template>
  <div class="mobileTips">
    <h1>{{ type === 'mobileLogin' ? '登录' : '注册' }}成功</h1>
    <h2>更多操作请移驾电脑进行</h2>
    <img class="successImg" :src="successImg" alt="icon">
    <ul class="tabs">
      <li>
        <span>登录网址：</span>
        <strong>{{ logoInfo.domainName }}</strong>
        <b class="copy" @click="copy">复制链接</b>
      </li>
      <li>
        <span>登录帐号：</span>
        <strong>{{ $route.query.userName }}</strong>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import ClipboardJS from 'clipboard'
import tips from '@/components/base/mobile/js/tips'
import { mapGetters } from 'vuex'
Vue.use(tips)
export default {
  name: 'mobileTips',
  computed: {
    ...mapGetters([
      'logoInfo'
    ])
  },
  data () {
    return {
      successImg: require('@/assets/images/mobile/成功.png'),
      type: ''
    }
  },
  methods: {
    copy () {
      let bord = new ClipboardJS('.copy', {
        text: (trigger) => {
          return ((this.logoInfo.domainName) || (trigger.getAttribute('aria-label')))
        }
      })
      bord.on('success', () => {
        this.$tips.show({
          message: '复制成功'
        })
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      if (from.name === 'mobileLogin') {
        vm.type = 'mobileLogin'
      } else {
        vm.type = 'mobileReg'
      }
    })
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileTips
  width 100%
  min-height 100%
  overflow auto
  background #ffffff
  padding 2.6rem 5.4rem
  box-sizing border-box
  h1
    font-size 2.7rem
    line-height 3.8rem
    color #333333
    text-align center
    margin-bottom 0.9rem
  h2
    font-size 1.3rem
    line-height 1.8rem
    color #666666
    text-align center
  .successImg
    width 15.4rem
    display block
    margin 3.5rem auto 5.5rem
  .tabs
    li
      margin-bottom 0.8rem
      display flex
      align-items center
      span
        font-size 1rem
        line-height 1.5rem
        color #666666
        white-space nowrap
      strong
        font-size 1.3rem
        line-height 1.5rem
        color #333333
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
      b
        margin-left 0.9rem
        min-width 5rem
        height 2.4rem
        line-height 2.4rem
        background #E34173
        color #ffffff
        text-align center
        font-size 1rem
        border-radius 0.3rem
</style>
